<template>
  <div class="ExchangeGoods">
    <div class="demo-nav">
      <div class="demo-nav__title">评价</div>
      <svg viewBox="0 0 1000 1000" class="demo-nav__back" @click="toBack">
        <path fill-rule="evenodd" fill="#969799" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"></path>
      </svg>
    </div>
    <div class="ExchangeGoods-demo">
      <van-row>
        <van-col span="7"><van-image width="5rem" height="5rem" fit="cover" :src="list.picUrl"/></van-col>
        <van-col span="15" style="text-align: left">
          <p>{{list.productName}}</p>
          <P style="color: #cccccc;font-size: 0.6rem;padding-top: 0.5rem">{{list.labelName}},{{list.labelUnit}}</P>
        </van-col>
      </van-row>
      <div class="xingxing">
        <span style="margin-right: 10px">满意程度</span>
        <van-rate  v-model="orderComment.orderCommentLevel" @change="onChange"/>
        <span style="margin-left: 10px;color: gray;font-size: 15px">{{level}}</span>
      </div>
      <van-cell-group>
        <van-field v-model="orderComment.orderCommentContent" rows="2" autosize label="评价：" type="textarea" maxlength="250" placeholder="请输入留言" show-word-limit />
      </van-cell-group>
      <van-cell title="上传凭证" align="left"/>
      <div align="left" style="padding: 0.8rem">
        <van-uploader
          v-model="fileList"
          :max-count="4"
          :after-read="onRead"
          accept="image/*"
          :multiple="true"
        ></van-uploader>
      </div>
    </div>
    <van-button round type="danger" @click="evaluate()">提交评价</van-button>
  </div>
</template>

<script>
  import { addOrderComment,uploadImagesComment } from "@/api/commodity/order_retreat";
  import { Notify } from 'vant';
  import { Toast } from 'vant';
    export default {
      name: "EvaluateOrder",
      data(){
        return{
          //订单列表评价的对象
          list:{},
          //添加评价的参数
          orderComment:{
            orderId:'',
            productId:'',
            orderCommentLevel:3,
            orderCommentContent:'',
            orderCommentPicture:'',
            fileList:[],
            urlList:[],
          },
          //评价级别
          level:'一般',
          //上传的图片
          fileList:[],
          urlList:[],


        }
      },
      created() {
        this.list = JSON.parse(sessionStorage.getItem('list'));
        console.log(this.list);
      },
      methods:{
        toBack(){
          this.$router.go(-1);//返回上一层
        },
        //上传多图片
        onRead (e) {
          //注意，我们这里没有使用form表单提交文件，所以需要用new FormData来进行提交
          let fd = new FormData()
          if (e instanceof Array && e.length) { // 判断是否是多图上传 多图则循环添加进去
            e.forEach(item => {
              fd.append("files", item.file)//第一个参数字符串可以填任意命名，第二个根据对象属性来找到file
            })
          } else {
            fd.append("files", e.file)
          }
          uploadImagesComment(fd).then((res)=>{
            if(res.data.code==200){
              this.urlList.push(res.data);
            }else {

            }
            console.log(res);
          })
        },
        //提交评价
        evaluate(){
          this.orderComment.orderId = this.list.orderId;
          this.orderComment.productId = this.list.productId;
          this.fileList.forEach(it=>{
            this.orderComment.fileList.push(it.file.name);
          })
          this.orderComment.urlList = this.urlList;
          if(this.orderComment.orderCommentContent==''){
            Notify({ type: 'danger', message: '请填写您的评价后提交' });
          }else {
            addOrderComment(this.orderComment).then((res)=>{
              if(res.data.code==200){
                this.$router.push({ path:'/AllOrder'});
                Toast.success("评价成功");
              }else {
                Toast.fail("评价失败");
              }
              console.log(res,"465");
            })
          }
        },
        //星星评价
        onChange(value){
          switch (value) {
            case 1:
              this.level = '非常差';
              break;
            case 2:
              this.level = '差';
              break;
            case 3:
              this.level = '一般';
              break;
            case 4:
              this.level = '好';
              break;
            case 5:
              this.level = '非常好';
              break;
          }
        },

      },

    }
</script>

<style scoped>
  .demo-nav{
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 56px;
    background-color: #fff;
    font-size: 1.1rem;
  }
  .demo-nav__back{
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
  .xingxing{
    padding: 10px;
    text-align:left;
    font-size: 14px;
  }
</style>
